<template>
    <div id="navigation">
       <span id="nav-sp"> 导航栏</span>
        <ul class="ivu-menu ivu-menu-light ivu-menu-vertical">
          <li  class="ivu-menu-item" v-for="(item,index ) in list" :key="index">
            <router-link :to="'/'+(item.name=='alert'?'':item.name )"id="nav-text">{{item.name}}</router-link>
            </li>
        </ul>
    </div>
</template>
<script>
    var menus=require('./menus.json').data;
    console.log(menus)
    export default {
      data(){
       return {
          list:menus
       }
      }
    }
</script>
<style lang="scss">
    #navigation{
        
        width: 16.666666667%;
        position: fixed;
    }
    #nav-sp{
        display:block;
        font-size:20px;
        text-align:center;
        font-weight:800;
    }
   
    #nav-text{
        font-size:16px;
        margin-left:50px;
    }
    
</style>
<style scoped>
a{ 
    color:gray;
    display:block;
    width:100%;
}

</style>